<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧边栏菜单</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #e2c8db;
        }

        ul {
            list-style: none;
            cursor: pointer;
        }

        ul li {
            border-bottom: 1px solid white;
        }

        nav {
            position: fixed;
            width: 350px;
            height: 650px;
            background-color: #c584b3;
        }

        .menus {
            margin: 50px 0;
            color: #fff;
        }

        .li {
            letter-spacing: 2px;
            font-size: 17px;
            font-weight: 600;
            padding: 16px 0;
            transition: 0.3s;
        }

        .menus li:hover {
            background-color: #d2a6c6;
        }

        .li .fa {
            font-size: 20px;
            width: 50px;
            height: 20px;
            text-align: center;
            margin-left: 5px;

        }

        .li ul {
            width: 0;
            height: 550px;
            padding: 50px 0;
            background-color: #a06993;
            position: absolute;
            top: 0;
            right: 0;
            overflow: hidden;
            transition: 0.3s;
        }

        .li ul li {
            padding: 16px 24px;
            white-space: nowrap;
            transition: 0.3s;
        }

        .li:hover ul {
            width: 250px;
        }

        .li ul li:hover {
            background-color: #c28fb4;
        }
    </style>
</head>

<body>
    <nav>
        <ul class="menus">
            <li class="li">
                <i class="fa fa-th-large" aria-hidden="true"></i>
                基础组件
                <ul>
                    <li>Button 按钮</li>
                    <li>Cell 单元格</li>
                    <li>Icon 图标</li>
                    <li>Image 图片</li>
                    <li>Layout 布局</li>
                    <li>Popup 弹出层</li>
                    <li>Toast 轻提示</li>
                </ul>
            </li>
            <li class="li">
                <i class="fa fa-check-square" aria-hidden="true"></i>
                表单组件
                <ul>
                    <li>Calendar 日历</li>
                    <li>Cascader 级联选择</li>
                    <li>Checkbox 复选框</li>
                    <li>Field 输入框</li>
                    <li>Picker 选择器</li>
                    <li>Radio 单选框</li>
                    <li>Rate 评分</li>
                    <li>Slider 滑块</li>
                    <li>Stepper 步进器</li>
                    <li>Switch 开关</li>
                </ul>
            </li>
            <li class="li">
                <i class="fa fa-comment" aria-hidden="true"></i>
                反馈组件
                <ul>
                    <li>Dialog 弹出框</li>
                    <li>Loading 加载</li>
                    <li>Notify 消息通知</li>
                    <li>Overlay 遮罩层</li>
                </ul>
            </li>
            <li class="li">
                <i class="fa fa-tags" aria-hidden="true"></i>
                展示组件
                <ul>
                    <li>Badge 徽标</li>
                    <li>Circle 环形进度条</li>
                    <li>Collapse 折叠面板</li>
                    <li>CountDown 倒计时</li>
                    <li>List 列表</li>
                    <li>NoticeBar 通知栏</li>
                    <li>Progress 进度条</li>
                    <li>Steps 步骤条</li>
                    <li>Tag 标签</li>
                </ul>
            </li>
            <li class="li">
                <i class="fa fa-bars" aria-hidden="true"></i>
                导航组件
                <ul>
                    <li>Grid 宫格</li>
                    <li>IndexBar 索引栏</li>
                    <li>NavBar 导航栏</li>
                    <li>Pagination 分页</li>
                    <li>Sidebar 侧边导航</li>
                    <li>Tab 标签页</li>
                    <li>Tabbar 标签栏</li>
                    <li>TreeSelect 分类选择</li>
                </ul>
            </li>
        </ul>
    </nav>
</body>

</html>